<template>
  <el-container class="home-container">
    <el-header>Vue3 + Element Plus 示例--{{ isSupported }}</el-header>
    <el-image
      style="width: 100px; height: 100px"
      src="https://v6-7-6.vueuse.org/logo-vertical.png"
      fit="fill"
    />
    <el-main>
      <el-card class="mb-4">
        <h2>多窗口示例</h2>
        <el-button type="primary" class="mt-2" @click="openMoreWindow">多窗口示例</el-button>
      </el-card>
      <el-card class="mb-4">
        <h2>Axios 请求示例</h2>
        <el-button type="primary" class="mt-2" @click="fetchData">获取数据</el-button>
        <el-table v-if="users.length" :data="users" class="mt-4">
          <el-table-column prop="id" label="ID"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="email" label="邮箱"></el-table-column>
        </el-table>
      </el-card>

      <el-card>
        <h2>Pinia 状态管理示例</h2>
        <div class="counter-display">{{ counterStore.count }}</div>
        <div class="counter-buttons">
          <el-button size="large" @click="counterStore.increment">+</el-button>
          <el-button size="large" @click="counterStore.decrement">-</el-button>
        </div>
      </el-card>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref } from 'vue'
import { useCounterStore } from '../stores/counter'
import { ElMessage } from 'element-plus'
import { useClipboard } from '@vueuse/core'

const source = ref('Hello')
const { text, copy, copied, isSupported } = useClipboard({ source })

const counterStore = useCounterStore()
const users = ref([])

const openMoreWindow = () => {
  window.electron.ipcRenderer.send('open-more-window')
  ElMessage({ message: '正在打开3个百度窗口...', type: 'info' })
}

const fetchData = async () => {
  try {
    const response = await window.$axios.get('/users')
    users.value = response
  } catch (error) {
    console.error('请求失败:', error)
    ElMessage.error('获取数据失败，请重试')
  }
}
</script>

<style scoped>
.el-header {
  background: #409eff;
  color: white;
  text-align: center;
  line-height: 60px;
}
.counter-display {
  font-size: 48px;
  text-align: center;
  margin: 20px 0;
}
.counter-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.mb-4 {
  margin-bottom: 20px;
}
</style>
